<template>
<div class="city">
    <!-- 使用vant组件库 -->
<form class='top' action="/">
  <van-search
    v-model="Searchvalue"
    show-action
    placeholder="请输入搜索关键词"
     input-align="center"
      background="#5c8d2a"
      shape="round"
    @search="onSearch"
    @cancel="onCancel"
  />
  <van-tabs v-model:active="tabactive">
    <!-- 这里allCities是一个对象，因此注意value是值，key是属性，index是下标 -->
    <template v-for="(value, key, index) in allCities" :key="key">
        <van-tab :title="value.title" :name="key"></van-tab>
    </template>
</van-tabs>
</form>

<div class="content">
   <city-group :groupData="currentGroup"/>
</div>
</div>
</template>

<script setup>
import { showToast } from 'vant';
import cityStore from '@/stores/modules/city';
import { storeToRefs } from 'pinia';
import {computed, ref} from 'vue'
import { useRouter } from 'vue-router';
import cityGroup from './childComponents/cityGroup.vue';
const router=useRouter()


const onSearch = (val) => showToast(val);
const onCancel = () =>{
    router.back()
};
const Searchvalue=ref('')
const tabactive=ref(0)

// 数据请求部分
const citydata=cityStore()
citydata.fetchAllCitiesData()//发送网络请求
const {allCities}=storeToRefs(citydata)

// 点击国内，海外之后获取城市部分数据
// 这里必须写计算属性，不然数据得到的currentGroup不是响应式的
const currentGroup=computed(()=>{return allCities.value[tabactive.value]})
console.log('currentGroup',currentGroup.value);


  
</script>

<style lang="less" scoped>
.top {
    position: relative;
    z-index: 9;
  }

  // 布局滚动
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }

</style>